<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
	  xmlns:th="http://www.thymeleaf.org"
	  xmlns:shiro="http://www.pollix.at/thymeleaf/shiro"
	  lang="en">
<head>
	<meta charset="utf-8">
	<title>登录</title>
	<meta name="viewport" content="initial-scale=1">
	<link rel="stylesheet" type="text/css" th:href="@{boot/css/bootstrap.min.css}"/>
	<link rel="stylesheet" type="text/css" th:href="@{boot/css/bootstrap-theme.min.css}"/>
	<script th:src="@{js/jquery-3.5.1.min.js}"></script>
	<script th:src="@{boot/js/bootstrap.min.js}"></script>
	<script type="text/javascript">
		function SendEmil() {
			$("#btn_send").attr("disabled", "disabled");
			var submitButtonText = "重发";
			var second = 60;
			var intervalObj = setInterval(function () {
				$("#btn_send").text(submitButtonText + "(" + second + ")");
				if (second == 0) {
					$("#btn_send").text(submitButtonText);
					$("#btn_send").removeAttr("disabled");//将按钮可用
					/* 清除已设置的setInterval对象 */
					clearInterval(intervalObj);
				}
				second--;
			}, 1000);
			$.ajax({
				url: "/sendAdminEmil"
				, type: 'get'
				, async: true
				, data: {
					emil: $("#emil").val()
				}
				, success: function (res) {
					if (res === '0') {
						$("#msg").html("邮件发送不成功，请重试");
					} else {
						$("#msg").html(res);
					}
				}
			});
		}

		function resigned() {
			var isok = false;
			$.ajax({
				url: "/userWithResiger"
				, type: 'get'
				, async: false
				, data: {
					phone: $("#phone").val()
					, pwd: $("#pwd1").val()
					, pwd2: $("#pwd2").val()
					, name: $("#name").val()
					, emil: $("#emil").val()
					, emilRes: $("#emilRes").val()
				}

				, success: function (res) {
					$("#msg").html(res);
					if (res === 'ok') {
						isok = true;
					}
				}
			});

			if (isok) {
				return true;
			} else {
				return false;
			}
		}
	</script>
</head>
<body style="background:url(img/bg.jpg);background-size: 1880px;">
<div class="container">
	<div class="">
		<div style="height:0px;padding-bottom:13%">
		</div>
		<div class="row">
			<div class="col-lg-4 col-lg-offset-4 row  col-xs-10 col-xs-offset-1 col-sm-6 col-sm-offset-3"
				 style="border: 1px solid #bbfffa;border-radius: 15px;backdrop-filter: blur(19px);">
				<form action="/userlogin" method="post">
					<h2 align="center" style="color: #bdffdc;">Welcome !</h2>
					<br>
					<p class="text-danger" align="center" th:text="${msg}"></p>
					<div class="col-lg-10 col-lg-offset-1">
						<label class="container-fluid">
							<h4 style="color: #bdffdc;">
								账 号
								<span class="small">(手机号/邮箱)</span>
							</h4>
						</label>
						<input class="form-control" type="text" name="nums"/>
						<label class="container-fluid">
							<h4 style="color: #bdffdc;">
								密 码
								<span class="small">(必填)</span>
							</h4>
						</label>
						<input class="form-control" type="password" name="pwd"/>
						<br>
						<div class="row">
							<div class="col-lg-4 col-lg-offset-1  col-xs-4 col-xs-offset-1">
								<button style="width: 80px;" class="btn btn-success " type="button" data-toggle="modal"
										data-target="#myModal">注册
								</button>
							</div>
							<div class="col-lg-4  col-lg-offset-1  col-xs-4 col-xs-offset-1">
								<input class="btn btn-info " type="submit" value="登录" style="width: 80px;"/>
							</div>
						</div>
						<br>
						<div>
							<span style="text-align: center"><a href="toHeloPage">找回密码/申请解封</a></span>
						</div>
						<br>
					</div>
				</form>
			</div>
		</div>

	</div>
</div>
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
	<div class="modal-dialog">
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
				<h4 class="modal-title" id="myModalLabel">注册信息</h4>
			</div>
			<div class="modal-body">
				<form class="form-horizontal" action="/userResiger" method="get" onsubmit="return resigned()">
					<span class="text-info col-lg-4 col-lg-offset-4 col-xs-4 col-xs-offset-4" id="msg">&nbsp;</span>
					<br>
					<div class="form-group">
						<label class="col-lg-2 col-xs-2 control-label">手机号</label>
						<div class="col-lg-8 col-xs-8">
							<input type="text" id="phone" name="phone" class="form-control" placeholder="个人手机号"/>
						</div>
					</div>
					<div class="form-group">
						<label class="col-lg-2 col-xs-2 control-label">邮箱</label>
						<div class="col-lg-8 col-xs-8">
							<input type="text" id="emil" name="emil" class="form-control" placeholder="任意邮箱账户"/>
						</div>
						<button id="btn_send" onclick="SendEmil()">发送</button>
					</div>
					<div class="form-group">
						<label class="col-lg-2 col-xs-2 control-label">密码</label>
						<div class="col-lg-8 col-xs-8">
							<input type="password" id="pwd1" name="pwd" class="form-control"
								   placeholder="3~12位数字字母下划线"/>
						</div>
					</div>
					<div class="form-group">
						<label class="col-lg-2 col-xs-2 control-label">重复密码</label>
						<div class="col-lg-8 col-xs-8">
							<input type="password" id="pwd2" name="pwd2" class="form-control"/>
						</div>
					</div>
					<div class="form-group">
						<label class="col-lg-2 col-xs-2 control-label">昵称</label>
						<div class="col-lg-8 col-xs-8">
							<input type="text" id="name" name="name" class="form-control"/>
						</div>
					</div>
					<div class="form-group">
						<label class="col-lg-2 col-xs-2 col-xs-2 control-label">验证码</label>
						<div class="col-lg-8 col-xs-8">
							<input type="text" id="emilRes" name="emilRes" class="form-control"/>
						</div>
					</div>
					<div class="modal-footer">
						<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
						<input type="submit" class="btn btn-primary" value="提交更改"/>
					</div>
				</form>
			</div>
		</div>
	</div>
</div>

</body>
</html>
